<template>
    <el-dialog v-model="isShow" :align-center="true" :close-on-click-modal="false" :destroy-on-close="true" title="选择图标" class="dialog-box">
        <template #header>
            <el-input
                @input="inputChange"
                type="text"
                clearable
                ref="inputRef"
                v-model="iconKeyword"
                prefix-icon="Search"
                placeholder="请输入要搜索的图标名称"
            ></el-input>
        </template>
        <template v-if="searchResultArr.length !== 0">
            <el-form>
                <el-form-item label="过滤器：">
                    <el-radio-group v-model="filter">
                        <el-radio value="all">全部</el-radio>
                        <el-radio value="icon">本地图标</el-radio>
                        <el-radio value="el">Element Plus 图标</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <el-scrollbar class="dialog-box-scrollbar" v-if="filterArr.length !== 0">
                <div class="icon-select-dialog-box">
                    <div class="icon-box" v-for="item in filterArr" :key="item" @click="onSelectIcon(item)">
                        <Icon class="icon" :name="item"></Icon>
                        <span class="name-box">
                            <template v-for="(char, index) in item" :key="index">
                                <p class="name keyword" v-if="iconKeyword.toUpperCase().includes(char.toUpperCase())">
                                    {{ char }}
                                </p>
                                <p class="name" v-else>
                                    {{ char }}
                                </p>
                            </template>
                        </span>
                    </div>
                </div>
            </el-scrollbar>
            <el-empty v-else />
        </template>
        <el-tabs v-else-if="iconKeyword === ''" v-model="activeName" width="300px">
            <el-tab-pane label="本地图标" name="icon">
                <el-scrollbar class="dialog-box-scrollbar" v-if="svgNameArr.length !== 0">
                    <ul class="icon-select-dialog-box">
                        <li class="icon-box" v-for="item in svgNameArr" :key="item" @click="onSelectIcon(item)">
                            <Icon class="icon" :name="item"></Icon>
                            <span class="name">{{ item }}</span>
                        </li>
                    </ul>
                </el-scrollbar>
                <el-empty v-else />
            </el-tab-pane>
            <el-tab-pane label="Element Plus 图标" name="el">
                <el-scrollbar class="dialog-box-scrollbar" v-if="elIconNames.length !== 0">
                    <ul class="icon-select-dialog-box">
                        <li class="icon-box" v-for="item in elIconNames" :key="item" @click="onSelectIcon(item)">
                            <Icon class="icon" :name="item"></Icon>
                            <span class="name">{{ item }}</span>
                        </li>
                    </ul>
                </el-scrollbar>
                <el-empty v-else />
            </el-tab-pane>
        </el-tabs>
        <el-empty v-else />
    </el-dialog>
</template>

<script setup lang="ts">
import { elIconNames } from './elIconNames'
import { IconNameType } from '@/types/type'
import { svgNames } from '~virtual/svg-component'
// 过滤器类型
type FilterType = 'all' | 'icon' | 'el'
// 搜索关键字
const iconKeyword = ref('')
// 激活tab名称
const activeName = ref('icon')
// 是否显示dialog
const isShow = ref(false)
// 搜索结果数组
const searchResultArr = ref<IconNameType[]>([])
// 过滤后的搜索结果数组
const filterArr = ref<IconNameType[]>([])
// 搜索结果过滤器
const filter = ref<FilterType>('all')
// 本地图标数组
const svgNameArr = computed(() => svgNames.filter((item) => !item.includes('/')))

// 监听过滤器变化
watch(
    () => filter.value,
    () => {
        getFilterArr()
    },
)
// 根据过滤器过滤搜索结果
const getFilterArr = () => {
    switch (filter.value) {
        case 'all':
            filterArr.value = searchResultArr.value
            break
        case 'icon':
            filterArr.value = searchResultArr.value.filter((item) => (item as string).split('-')[0] === 'icon')
            break
        case 'el':
            filterArr.value = searchResultArr.value.filter((item) => (item as string).split('-')[0] === 'el')
            break
        default:
            break
    }
}

const emit = defineEmits(['onSelectIcon'])
// 打开dialog
const onOpenDialog = () => {
    isShow.value = true
}
// 关闭dialog
const onCloseDialog = () => {
    isShow.value = false
}
// 所有图标
const allIcon: IconNameType[] = [...svgNameArr.value, ...elIconNames]
// 搜索输入改变触发
const inputChange = () => {
    filterArr.value = []
    searchResultArr.value = []
    if (iconKeyword.value === '') return
    searchResultArr.value = allIcon.filter((item) => (item as string).toUpperCase().includes(iconKeyword.value.toUpperCase()))
    getFilterArr()
}
// 选中icon触发
const onSelectIcon = (icon: IconNameType) => {
    emit('onSelectIcon', icon)
    onCloseDialog()
}
// 对外暴露打开dialog方法
defineExpose({
    onOpenDialog,
})
</script>

<style lang="scss" scoped>
.icon-select-dialog-box {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; // 子项之间的间距
    padding: 10px;

    .icon-box {
        flex: 1 1 120px; // flex-grow, flex-shrink, flex-basis
        min-width: 100px;
        max-width: 140px;
        height: 120px;
        padding: 10px;
        margin: 5px;
        box-sizing: border-box;
        background-color: var(--el-bg-color-overlay);
        border: 1px solid var(--el-bg-color-overlay);
        border-radius: 20px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-flow: column;
        transition: all 0.3s;
        cursor: pointer;

        .icon {
            font-size: 40px;
        }
        .name-box {
            display: flex;
        }
        .name {
            font-size: 12px;
            text-wrap: nowrap;

            & .keyword {
                color: var(--el-color-primary);
            }
        }

        &:hover {
            transform: scale(1.2);
            color: var(--el-color-primary);
            border: 1px solid var(--el-color-primary);
        }
    }
}
</style>
